<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像 -->
      <div class="avatar_box">
        <img src="../assets/logo.png" />
      </div>
      <!-- 登录表单区 -->
      <el-form :model="loginForm" :rules="rules" ref="loginFormRef" class="login_form">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button @click="login" type="primary">登录</el-button>
          <el-button @click="resetForm" type="info">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {
    _loginApi
  } from './request/api.js'
  export default {
    data() {
      var valPassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        }
        callback()
      }
      return {
        loginForm: {
          username: 'admin',
          password: '*963.'
        },
        rules: {
          password: [{
            validator: valPassword,
            trigger: 'blur'
          }],
          username: [{
            required: true,
            message: '用户名不能为空',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      login() {
        this.$refs.loginFormRef.validate((valid) => {
          if (valid) {
            _loginApi(this.loginForm).then(res => {
              console.log(res.data)
              const resData = res.data
              if (resData.status) {
                this.$message.success('登录成功')
                // 1.保存token到客户端的sessionStorage中
                window.sessionStorage.setItem('token', res.data.data.token)
                // 2.页面跳转
                this.$router.push('/home')
              }
            }).catch(error => {
              console.log(error)
              this.$message.error('用户名密码错误')
            })
          }
        })
      },
      resetForm() {
        // 重置表单
        this.$refs.loginFormRef.resetFields()
      }
    }

  }
</script>

<style lang="less" scoped>
  .login_container {
    background-color: #2b4b6b;
    height: 100%;
  }

  .login_box {
    width: 450px;
    height: 300px;
    background-color: white;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .avatar_box {
      height: 130px;
      width: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      padding: 10px;
      box-shadow: 0 0 10px #ddd;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }
  }

  .login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
  }

  .btns {
    display: flex;
    justify-content: flex-end;
  }
</style>
